<!--
 * @Author: zhangxiangsheng 1026583651@qq.com
 * @Date: 2024-06-18 09:22:10
 * @LastEditors: zhangxiangsheng 1026583651@qq.com
 * @LastEditTime: 2024-06-21 15:51:56
 * @FilePath: \appGly\pages\Station\components\ChargeCaritem.vue
 * @Description: 
 * 
 * Copyright (c) 2024 by ${git_name_email}, All Rights Reserved. 
-->
<template>
  <view
    class="stationitemcontent"
    @click="$z.gopage(`/pages/ChargeCar/ChargeCarEdt?gtel=${item.gtel}`)"
  >
    <view class="u-flex title">
      <view class="iconfont iconicon-chongdianzhuang sbicon"></view>
      <view class="u-line-1">{{ item.mc }}</view>
      <view style="width: 8rpx"></view>
      <u-tag
        size="mini"
        shape="circle"
        type="primary"
        :text="$z.$t(`使用率${item['syl']}%`)"
      ></u-tag>
    </view>
    <view class="zsb">
      {{ $z.$t(`地址`) }}
      ：{{ item.dz }}
    </view>
    <view class="mui-ellipsis" style="font-size: 28rpx">
      <!-- <span
        ng-bind="sbgztfn(p)['mc']"
        ng-style="{color:sbgztfn(p)['color']}"
      ></span> -->
      <text :style="[{ color: showdata.gzt.color }]">
        {{ showdata.gzt.mc }}
      </text>
      <text class="iconfont icontubiaozhizuo-"></text>
      <text style="color: #73c454">
        {{ showdata["gztkx"] }} {{ $t("路空闲") }}
      </text>
      <text class="iconfont icontubiaozhizuo-"></text>
      <text style="color: #f38782">
        {{ showdata["gztzy"] }} {{ $t("路使用中") }}
      </text>
    </view>
    <view class="rightIcon">
      <u-icon name="arrow-right" size="24" color="#969696"></u-icon>
    </view>
  </view>
</template>

<script>
  export default {
    props: {
      item: {
        type: Object,
        default: () => {
          return {};
        },
      },
    },
    computed: {
      showdata() {
        let gzt = [
          { zhi: 0, mc: this.$z.$t("离线"), color: "#969696" },
          { zhi: 1, mc: this.$z.$t("在线"), color: "#2093f5" },
          {
            zhi: 2,
            mc: this.$z.$t("断电"),
            color: "#ffa1a7",
          },
          { zhi: 9, mc: this.$z.$t("未上线"), color: "#969696" },
        ];
        let dqgzt = gzt.find((e) => {
          return e["zhi"] == this.item["gzt"];
        });
        if (!dqgzt) {
          dqgzt = gzt[3];
        }
        var r = 0;
        for (var i = 1; i <= this.item["gls"]; i++) {
          if (this.item["glzt" + i] != 1) {
            r++;
          }
        }
        var z = this.item["gls"] - r;

        return {
          gzt: dqgzt,
          gztkx: r,
          gztzy: z,
        };
      },
    },
    data() {
      return {};
    },
  };
</script>

<style lang="scss" scoped>
  .stationitemcontent {
    background: #fff;
    padding: 22rpx 30rpx;
    position: relative;
    .rightIcon {
      position: absolute;
      right: 20rpx;
      top: 50%;
      transform: translateY(-50%);
    }
    .title {
      font-size: 34rpx;
      .iconfont {
        width: 60rpx;
        height: 60rpx;
        font-size: 40rpx;
        margin-right: 12rpx;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
    .zsb {
      font-size: 24rpx;
      line-height: 60rpx;
      color: #8f8f94;
      .dl {
        margin-left: 10px;
        color: #92ceff;
      }
    }
  }

  .zxChargeCar {
    font-size: 14px;
    color: #92ceff;
    margin-right: 5px;
  }

  .lxChargeCar {
    font-size: 14px;
    color: #969696;
    margin: 0 5px;
  }

  .cdzChargeCar {
    font-size: 14px;
    color: #ffa1a7;
    margin: 0 5px;
  }

  .kxChargeCar {
    font-size: 14px;
    color: #9affad;
    margin: 0 5px;
  }

  .shu {
    font-size: 16px;
    /*vertical-align: top;*/
    height: 14px;
    /* display: inline-block; */
  }
</style>
